<template>
  <div class="home-index">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="home-swiper-box">
        <swiper></swiper>
      </div>
      <div class="home-index-grid">
        <van-grid square>
          <van-grid-item
            v-for="item in img_list"
            :key="item.id"
            icon="photo-o"
            :text="item.title"
            @click="go_detail"
          />
        </van-grid>
      </div>
      <div class="home-content-refresh">
        <div v-show="loading">
          <van-skeleton title :row="3" />
        </div>
        <div v-show="!loading">
          <goods
            :thumb="item.image"
            :title="item.title"
            v-for="item in img_list"
            :key="'a' + item.id"
            :desc="item.add_time"
          ></goods>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import swiper from "./swiper/index.vue";
import goods from "./goods/index.vue";
import http from "@/utils/request.js";
import { Toast } from "vant";
import Mock from "mockjs";
export default {
  name: "index",
  components: {
    swiper,
    goods,
  },
  data() {
    return {
      loading: true,
      time: null,
      img_list: [],
      count: 0,
      isLoading: false,
    };
  },
  created() {
    this.time = setTimeout(() => {
      this.loading = false;
    }, 3000);
    this.get_list();
  },
  destroyed() {
    this.time = null;
  },
  methods: {
    go_detail() {
      this.$router.push({
        path: "/detail",
      });
    },
    get_list() {
      const data131 = Mock.mock({
        "list|8": [
          {
            id: "@increment(1)",
            title: "@ctitle",
            image: "@image('300x300', '#50B347', '#FFF', 'vant')",
            content: "@cparagraph",
            add_time: "@date(yyyy-MM-dd hh:mm:ss)",
          },
        ],
      });
      this.img_list = data131;
      http({
        url: "/api/get/user",
        method: "get",
      })
        .then((res) => {
          console.log(res);
          // this.img_list = res.data.list;
        })
        .catch((err) => {
          console.error(err);
          // this.img_list = res.data.list;
        });
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
        this.get_list();
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.home-index {
  .home-content-refresh {
  }
}
</style>
